<template>
  <div class="basic-info">
    <el-form label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="考核模板名称：">
            <el-input
              size="small"
              style="width: 300px"
              v-model="emitData.templateName"
              :disabled="type === 'view'"></el-input>
          </el-form-item>

          <el-form-item label="指标模型：">
            <el-select
              v-model="emitData.modelId"
              placeholder="请选择"
              size="small"
              class="simple"
              :disabled="type === 'view'">
              <el-option v-for="item in indexList" :key="item.id" :label="item.modelName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="评价类型：">
            <el-select
              v-model="emitData.evaStyle"
              placeholder="请选择"
              size="small"
              class="simple"
              :disabled="type === 'view'">
              <el-option
                v-for="item in evaStyleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="评价方式：">
            <el-select
              v-model="emitData.evaWay"
              placeholder="请选择"
              size="small"
              class="simple"
              :disabled="type === 'view'">
              <el-option
                v-for="item in evaWayOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="考核对象预置：" class="line">
            <div>不参与考核条件（支持多选）</div>
            <el-checkbox-group v-model="emitData.checklistObj1" :disabled="type === 'view'">
              <el-checkbox label="0">新录用人员在试用期内的</el-checkbox>
              <el-checkbox label="1">
                <span>病、事假累计时间超过当期平时考核周期一半的</span>
                <!-- <el-input size="small" v-model="emitData.radioNum" @input="filterNonNumeric('1')"></el-input> -->
                <!-- <span>%</span> -->
              </el-checkbox>
              <el-checkbox label="2">外派人员</el-checkbox>
              <el-checkbox label="3">
                <span>当季度退休人员在职不足</span>
                <el-select v-model="emitData.monthNum" placeholder="请选择" size="small">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
                <!-- <el-input size="small" v-model="emitData.monthNum" @input="filterNonNumeric('2')"></el-input> -->
                <span>个月</span>
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'BasicInfo',
  components: {},
  props: {
    formData: {
      type: Object,
      default: () => {
        return {
          radioObj: '',
          checklistObj1: [],
          radioNum: '50',
          monthNum: 3,
        }
      },
    },
    indexList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      emitData: {
        radioObj: '',
        checklistObj1: [],
        radioNum: '50',
        monthNum: 3,
        evaStyle: '0',
        evaWay: '0',
        modelId: '',
        templateName: '',
      },
      evaStyleOptions: [
        {
          value: '0',
          label: '综合评价',
        },
      ],
      evaWayOptions: [
        {
          value: '0',
          label: '等级制（好、较好、一般、较差）',
        },
      ],
      type: '',
      options: [
        {
          value: 1,
          label: '1',
        },
        {
          value: 2,
          label: '2',
        },
        {
          value: 3,
          label: '3',
        },
      ],
    }
  },
  watch: {
    formData: {
      handler(news) {
        this.emitData = Object.assign(this.emitData, news)
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.type = this.$route.query.type || ''
  },
  methods: {
    toEmit(id) {
      const param = {
        ...this.emitData,
        step: id || '',
      }
      this.$emit('reviewData', param)
    },
    filterNonNumeric(num) {
      if (num === '1') {
        // 限制输入数字 最大值 100 最小值0
        this.emitData.radioNum = this.emitData.radioNum.replace(/\D/g, '')
        if (Number(this.emitData.radioNum) > 100) {
          this.emitData.radioNum = 100
        }
        if (Number(this.emitData.radioNum) < 0) {
          this.emitData.radioNum = 0
        }
      } else {
        // 限制输入数字且保留一位小数 最小值为0
        this.emitData.monthNum = this.emitData.monthNum.replace(/^\D*(\d*(?:\.\d{0,1})?).*$/g, '$1')
        if (Number(this.emitData.monthNum) < 0) {
          this.emitData.monthNum = 0
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.basic-info {
  width: 100%;
  height: 100%;
  .line {
    .el-checkbox-group {
      display: flex;
      flex-direction: column;
    }
    /deep/.el-select {
      width: 50px;
      margin: 0 5px;
      .el-input__inner {
        padding-right: 15px;
        text-align: center;
      }
      .el-input__suffix {
        display: none;
      }
    }
  }
  .simple {
    width: 300px;
  }
}
</style>
